<!--
 * @Description: 字典类型
 * @Author: Liu Zhiwang
 * @Date: 2021-04-09 11:49:17
 * @LastEditTime: 2022-08-03 15:35:38
 * @LastEditors: zhangweili zhang_weili@uxsino.com
-->
<template>
  <div class="app-container v-flex">
    <div class="data-statistics c6-container" style="overflow-y: auto;">
      <filter-form :form="listQuery" :data="filterData" only-query @search="search">
        <el-button type="primary" size="mini" class="refresh-btn" icon="el-icon-refresh" @click="reset">重置</el-button>
        <el-button type="primary" size="mini" @click="exportList">导出</el-button>

      </filter-form>

      <!-- 表格 -->
      <div slot="valueform" class="tableContainer widthPage v-flex-elastic" style="height: calc(50%);">
        <div style="text-align:center;margin:10px 0;">动态检测评价得分表</div>
        <div ref="main" style="height: calc(100% - 37px);display:flex;">
          <el-table
            :data="dataList"
            height="100%"
            border
            stripe
            :span-method="objectSpanMethod"
            style="width: 100%; flex: 1;">
            <el-table-column prop="deptName" label="单位" align="center" />
            <el-table-column prop="lineName" label="线路" align="center" />
            <el-table-column v-for="item in headTitle" :key="item.title" show-overflow-tooltip :label="item.title" align="center">
              <el-table-column label="优良率" width="100" align="center">
                <template slot-scope="scope">
                  <a>{{ scope.row['excellectRate'+item.yearMonth]*100 + '%' }}</a>
                </template>
              </el-table-column>
              <el-table-column label="CDI" width="120" align="center">
                <template slot-scope="scope">
                  <a>{{ Math.abs(scope.row['cdi'+item.yearMonth]*100).toFixed(2) }}</a>
                </template>
              </el-table-column>
              <el-table-column label="总分" width="120" align="center">
                <template slot-scope="scope">
                  <a>{{ Math.abs(scope.row['totalScore'+item.yearMonth]*100).toFixed(3) }}</a>
                </template>
              </el-table-column>
              <!-- <el-table-column label="总分" :prop="'totalScore'+item.yearMonth" width="120" align="center" /> -->
            </el-table-column>
            <el-table-column label="综合评分" align="center" width="130px">
              <el-table-column label="优良率" align="center">
                <template slot-scope="scope">
                  <a>{{ scope.row.excellectRate*100 + '%' }}</a>
                </template>
              </el-table-column>
              <el-table-column label="CDI" align="center">
                <template slot-scope="scope">
                  <a>{{ Math.abs(scope.row.cdi*100).toFixed(2) }} </a>
                </template>
              </el-table-column>
              <el-table-column label="总分" align="center">
                <template slot-scope="scope">
                  <a>{{ Math.abs(scope.row.totalScore*100).toFixed(3) }} </a>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="totalScore" label="总分" align="center" /> -->
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="tableContainer widthPage v-flex-elastic" style="height: calc(50%);">
        <div v-if="isShow">
          <div id="excellectRateId" class="col-div" style="width: 33%; height: 280px;float: left;" />
          <div id="cdiId" class="col-div" style="width: 33%; height: 280px;float: left;" />
          <div id="totalScoreId" class="col-div" style="width: 33%; height: 280px;float: left;" />
        </div>
      </div>
      <div />
    </div>
  </div>

</template>
<script>
import { listAll
} from '@/api/cms/comprehensiveAnalysis/DynamiCdetectionEvaluation'
import { downloadFile, tableMixin } from '@/utils/public'
import { findAllUnitDeptList } from '@/api/platform'
import { getToken } from '@/utils/auth'
import * as echarts from 'echarts'

export default {
  name: 'DynamiCdetectionEvaluation',
  components: {
  },
  mixins: [tableMixin],
  data() {
    return {
      railTypeSwitch: 0,
      // 表格高度
      height: 0,
      dataList: [],
      headTitle: [],
      tableData: {
        loading: false
      },
      isShow: true,
      monthData: [],
      nameList: [],
      excellectRateList: [],
      cdiList: [],
      unitDeptCode: '',
      // 顶部操作栏配置
      filterData: {
        deptId: {
          clearable: true,
          key: 'unitDeptCode',
          type: 'select',
          title: '单位',
          placeholder: '请选择单位',
          options: [],
          props: { label: 'deptName', value: 'deptNo' },
          changeFn: (vm) => {
            if (vm) {
              this.unitDeptCode = vm
              this.listQuery = {
                unitDeptCode: vm,
                railtype: '',
                gt: '',
                pt: '',
                beginMonth: this.moment().subtract(11, 'months').format('YYYY-MM'),
                endMonth: this.moment().format('YYYY-MM')
              }
              this.getListPage() // 查询列表信息
            }
          }
        },
        beginMonth: {
          width: 'auto',
          key: 'beginMonth',
          type: 'date',
          dateType: 'month',
          valueFormat: 'yyyy-MM',
          placeholder: '选择开始月份'
        },
        endMonth: {
          width: 'auto',
          key: 'endMonth',
          type: 'date',
          dateType: 'month',
          valueFormat: 'yyyy-MM',
          placeholder: '选择结束月份'
        }
      },
      // 查询列表请求参数
      listQuery: {
        railtype: '',
        gt: '',
        pt: '',
        unitDeptCode: '',
        beginMonth: '',
        endMonth: ''
      },

      // 查看弹框
      dialogLook: {
        visible: false
      }
    }
  },
  created() {
  },
  mounted() {
    this.initPage()
  },
  methods: {
    initPage() {
      this.listQuery.beginMonth = this.moment().subtract(11, 'months').format('YYYY-MM')
      this.listQuery.endMonth = this.moment().format('YYYY-MM')
      // 获取单位 deptList
      findAllUnitDeptList({}).then(response => {
        var resData = response.data
        for (var i in resData) {
          if (resData[i].deptNo === '001200') {
            resData.splice(i, 1)
          }
        }
        // 通过单位标识确定接口，连接各段的数据库
        if (resData.length !== 0) {
          this.filterData['deptId'].options = response.data
          this.unitDeptCode = response.data[0].deptNo
          this.listQuery.unitDeptCode = response.data[0].deptNo
          this.getListPage()
        } else {
          this.getListPage()
        }
      })
      // findAllUnitDeptList({}).then(response => {
      //   this.filterData.deptId.options = Object.freeze(response.data)
      // })
    },
    initChart() {
      setTimeout(() => {
        const excellectRateId = echarts.init(document.getElementById('excellectRateId'))
        excellectRateId.setOption(this.excellectRateChatOption)
        excellectRateId.resize()
        const cdi = echarts.init(document.getElementById('cdiId'))
        cdi.setOption(this.cdiChatOption)
        cdi.resize()
        const totalScore = echarts.init(document.getElementById('totalScoreId'))
        totalScore.setOption(this.totalScoreChatOption)
        totalScore.resize()
      }, 500)
    },
    // 注意：横向合并列 纵向合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (row.rowspan != null && row.rowspan !== undefined) {
          return { rowspan: row.rowspan, colspan: 1 }
        } else {
          return { rowspan: 0, colspan: 0 }
        }
      }
    },
    reset() {
      this.listQuery = {
        unitDeptCode: null,
        beginMonth: null,
        enddata: null
      }
      // this.getListPage()
    },
    exportList() {
      var url = process.env.VUE_APP_BASE_API + '/cms/jcjcEvalauationSummarys/exportList?1=1'
      var fileName = '动态检测评价.xls'
      if (this.listQuery.beginMonth) {
        url += '&beginMonth=' + this.listQuery.beginMonth
      }
      if (this.listQuery.endMonth) {
        url += '&endMonth=' + this.listQuery.endMonth
      }
      url += '&access_token=' + getToken()
      window.location.href = url
    },
    changeRailType(val) {
      if (val) {
        this.listQuery.pt = true
        this.listQuery.gt = ''
      } else {
        this.listQuery.pt = ''
        this.listQuery.gt = true
      }
      this.getListPage()
    },
    // 查询信息列表
    getListPage() {
      this.isShow = false
      this.tableData.loading = true
      listAll(this.listQuery).then(response => {
        const resdata = response.data
        if (resdata.data) {
          this.dataList = resdata.data.dataList
          this.headTitle = resdata.data.headTitle
          this.monthData = resdata.data.monthData
          this.nameList = resdata.data.nameList
          this.excellectRateList = resdata.data.excellectRateList
          this.cdiList = resdata.data.cdiList
          this.totalScoreList = resdata.data.totalScoreList
          this.excellectRateChatOption = {
            title: {
              text: '优良率'
            },
            tooltip: {
              trigger: 'axis',
              formatter: function(datas) {
                var res = datas[0].seriesName + '<br/>'
                for (var i = 0, length = datas.length; i < length; i++) {
                  res += datas[i].name + '：' +
                                            datas[i].value * 100 + '%' + '<br/>'
                }
                return res
              }
              // formatter: '{a} <br/>{b} : {c}%'
            },
            legend: {
              data: this.nameList,
              top: 10,
              width: '80%'
            },
            grid: {
              left: '5%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: true,
                // textStyle: {
                //   color: '#fff'
                // },
                interval: 0, // 显示所有X轴信息
                rotate: 40 // 倾斜角度
              },
              data: this.monthData
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: function(value) {
                  var result = ''// 拼接加\n返回的类目项
                  result = (value * 100) + '%'
                  return result
                }
              }
            },
            series: this.excellectRateList
          }
          this.cdiChatOption = {
            title: {
              text: 'CDI'
            },
            tooltip: {
              trigger: 'axis',
              formatter: function(datas) {
                var res = datas[0].seriesName + '<br/>'
                for (var i = 0, length = datas.length; i < length; i++) {
                  res += datas[i].name + '：' +
                                            Math.abs(datas[i].value * 100).toFixed(2) + '<br/>'
                }
                return res
              }
            },
            legend: {
              data: this.nameList,
              top: 10,
              width: '80%'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: true,
                // textStyle: {
                //   color: '#fff'
                // },
                interval: 0, // 显示所有X轴信息
                rotate: 40 // 倾斜角度
              },
              data: this.monthData
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: function(value) {
                  var result = ''// 拼接加\n返回的类目项
                  result = Math.abs(value * 100)
                  return result
                }
              }
            },
            series: this.cdiList
          }
          this.totalScoreChatOption = {
            title: {
              text: '总分'
            },
            tooltip: {
              trigger: 'axis',
              formatter: function(datas) {
                var res = datas[0].seriesName + '<br/>'
                for (var i = 0, length = datas.length; i < length; i++) {
                  res += datas[i].name + '：' +
                                            Math.abs(datas[i].value * 100).toFixed(3) + '<br/>'
                }
                return res
              }
            },
            legend: {
              data: this.nameList,
              top: 10,
              width: '80%'
            },
            grid: {
              left: '3%',
              right: '2%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: true,
                // textStyle: {
                //   color: '#fff'
                // },
                interval: 0, // 显示所有X轴信息
                rotate: 80 // 倾斜角度
              },
              data: this.monthData
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: function(value) {
                  var result = ''// 拼接加\n返回的类目项
                  result = Math.abs(value * 100)
                  return result
                }
              }
            },
            series: this.totalScoreList
          }
          if (resdata.data.nameList.length > 0) {
            this.isShow = true
          }
          this.initChart()
          this.tableData.loading = false
        } else {
          this.$alert(resdata.message, '提示', {
            confirmButtonText: '确定'
          })
        }
      }).catch((e) => {
        this.tableData.loading = false
      })
    },
    // 查询
    search() {
      this.listQuery.page = 1
      this.getListPage()
    },

    // 改变分页配置
    changePageOption(data) {
      this.listQuery.page = data.page
      this.listQuery.size = data.size
      this.getListPage()
    },

    // 重置查询
    resetListQuery() {
      this.listQuery = {
        page: 1,
        size: 20
      }
      this.getListPage()
    }
  }
}
</script>

<style scoped lang="scss">
  .dialog-table {
    position: relative;
    width: 420px;
    height: 100%;
    overflow: hidden;
    border: 1px solid #EBEEF5;
    box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.4s linear;
    background: #409eff;
    color: white;
    z-index: 10;
    .dialog-title {
      display: flex;
      align-items: center;
      height: 34px;
      line-height: 34px;
      text-align: left;
      padding: 0 10px 0 14px;
      i {
        flex: 1;
        font-size: 22px;
        text-align: right;
        cursor: pointer;
      }
    }
  }

  .dialogtan {
    width: 0;
    transition: all 0.4s linear;
  }

  .col-div {
    width: 100%;
    height: calc(100% - 42px);
    padding: 0 8px;
  }

  ::v-deep .el-table_1_column_2 div {
    width: initial !important;
  }
</style>
